<template>
  <div class="menu">
    <div
      class="cmenu"
      style="width: 80px; text-align: center; display: flex; width: 160px"
      title="乘凉个人博客"
    >
      <div>
        <el-image alt="logo" :src="logo" fit="cover" style="width: 50px; height: 50px"></el-image>
      </div>
      <div>
        <el-image
          alt="logo"
          :src="cl"
          fit="container"
          style="height: 35px; width: 100px; margin-top: 8px"
        ></el-image>
      </div>
    </div>
    <div class="cmenu">
      <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        @select="handleSelect"
        mode="horizontal "
      >
        <el-menu-item index="/umain">首页</el-menu-item>
        <el-menu-item index="/community">社区</el-menu-item>
        <el-menu-item index="/rank">排行榜</el-menu-item>
        <el-menu-item index="/other">归档</el-menu-item>
      </el-menu>
    </div>
    <div class="cmenu" style="margin-top: 6px">
      <button @click="searchContent">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" width="36px" height="36px">
          <rect width="36" height="36" x="0" y="0" fill="#fdd835"></rect>
          <path
            fill="#e53935"
            d="M38.67,42H11.52C11.27,40.62,11,38.57,11,36c0-5,0-11,0-11s1.44-7.39,3.22-9.59 c1.67-2.06,2.76-3.48,6.78-4.41c3-0.7,7.13-0.23,9,1c2.15,1.42,3.37,6.67,3.81,11.29c1.49-0.3,5.21,0.2,5.5,1.28 C40.89,30.29,39.48,38.31,38.67,42z"
          ></path>
          <path
            fill="#b71c1c"
            d="M39.02,42H11.99c-0.22-2.67-0.48-7.05-0.49-12.72c0.83,4.18,1.63,9.59,6.98,9.79 c3.48,0.12,8.27,0.55,9.83-2.45c1.57-3,3.72-8.95,3.51-15.62c-0.19-5.84-1.75-8.2-2.13-8.7c0.59,0.66,3.74,4.49,4.01,11.7 c0.03,0.83,0.06,1.72,0.08,2.66c4.21-0.15,5.93,1.5,6.07,2.35C40.68,33.85,39.8,38.9,39.02,42z"
          ></path>
          <path
            fill="#212121"
            d="M35,27.17c0,3.67-0.28,11.2-0.42,14.83h-2C32.72,38.42,33,30.83,33,27.17 c0-5.54-1.46-12.65-3.55-14.02c-1.65-1.08-5.49-1.48-8.23-0.85c-3.62,0.83-4.57,1.99-6.14,3.92L15,16.32 c-1.31,1.6-2.59,6.92-3,8.96v10.8c0,2.58,0.28,4.61,0.54,5.92H10.5c-0.25-1.41-0.5-3.42-0.5-5.92l0.02-11.09 c0.15-0.77,1.55-7.63,3.43-9.94l0.08-0.09c1.65-2.03,2.96-3.63,7.25-4.61c3.28-0.76,7.67-0.25,9.77,1.13 C33.79,13.6,35,22.23,35,27.17z"
          ></path>
          <path
            fill="#01579b"
            d="M17.165,17.283c5.217-0.055,9.391,0.283,9,6.011c-0.391,5.728-8.478,5.533-9.391,5.337 c-0.913-0.196-7.826-0.043-7.696-5.337C9.209,18,13.645,17.32,17.165,17.283z"
          ></path>
          <path
            fill="#212121"
            d="M40.739,37.38c-0.28,1.99-0.69,3.53-1.22,4.62h-2.43c0.25-0.19,1.13-1.11,1.67-4.9 c0.57-4-0.23-11.79-0.93-12.78c-0.4-0.4-2.63-0.8-4.37-0.89l0.1-1.99c1.04,0.05,4.53,0.31,5.71,1.49 C40.689,24.36,41.289,33.53,40.739,37.38z"
          ></path>
          <path
            fill="#81d4fa"
            d="M10.154,20.201c0.261,2.059-0.196,3.351,2.543,3.546s8.076,1.022,9.402-0.554 c1.326-1.576,1.75-4.365-0.891-5.267C19.336,17.287,12.959,16.251,10.154,20.201z"
          ></path>
          <path
            fill="#212121"
            d="M17.615,29.677c-0.502,0-0.873-0.03-1.052-0.069c-0.086-0.019-0.236-0.035-0.434-0.06 c-5.344-0.679-8.053-2.784-8.052-6.255c0.001-2.698,1.17-7.238,8.986-7.32l0.181-0.002c3.444-0.038,6.414-0.068,8.272,1.818 c1.173,1.191,1.712,3,1.647,5.53c-0.044,1.688-0.785,3.147-2.144,4.217C22.785,29.296,19.388,29.677,17.615,29.677z M17.086,17.973 c-7.006,0.074-7.008,4.023-7.008,5.321c-0.001,3.109,3.598,3.926,6.305,4.27c0.273,0.035,0.48,0.063,0.601,0.089 c0.563,0.101,4.68,0.035,6.855-1.732c0.865-0.702,1.299-1.57,1.326-2.653c0.051-1.958-0.301-3.291-1.073-4.075 c-1.262-1.281-3.834-1.255-6.825-1.222L17.086,17.973z"
          ></path>
          <path
            fill="#e1f5fe"
            d="M15.078,19.043c1.957-0.326,5.122-0.529,4.435,1.304c-0.489,1.304-7.185,2.185-7.185,0.652 C12.328,19.467,15.078,19.043,15.078,19.043z"
          ></path>
        </svg>
        <span class="now">now!</span>
        <span class="play">play</span>
      </button>
    </div>

    <div class="cmenu" style="margin-top: 10px">
      <el-dropdown>
        <span class="el-dropdown-link">
          <el-button class="btn" style="border: 0">
            <el-avatar
              :size="36"
              :src="userinfo.avatar === '' ? userinfo.nickname : userinfo.avatar"
              @error="errorHandler"
              class="avatar"
            >
              {{ isLogin === false ? '登录' : userinfo.nickname }}
            </el-avatar>
          </el-button>
        </span>
        <template #dropdown>
          <el-dropdown-menu v-if="!isLogin">
            <el-dropdown-item>注销</el-dropdown-item>
          </el-dropdown-menu>

          <el-dropdown-menu v-if="isLogin" style="width: 200px">
            <el-dropdown-item @click="toUserPage">个人中心</el-dropdown-item>
            <el-dropdown-item @click="toContentManager">内容管理</el-dropdown-item>
            <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
    <div class="cmenu" style="display: flex">
      <div class="right-menu">
        <el-popover placement="bottom" :width="400" trigger="hover">
          <template #reference>
            <div class="item">消息通知</div>
          </template>
          <NoticeData :dataList="props.noticeList"></NoticeData>
        </el-popover>
      </div>
      <div class="right-menu">
        <el-popover placement="bottom" :width="400" trigger="hover">
          <template #reference>
            <div class="item">浏览历史</div>
          </template>
          <History :dataList="props.historyList"></History>
        </el-popover>
      </div>
    </div>
    <div class="cmenu" style="margin-right: 20px;margin-top:15px">
      <el-button type="danger" plain round size="small" @click="publish">发布</el-button>
    </div>
  </div>
  <ConfirmDialog ref="confirmDialog" @confirm="handlerConfirm"></ConfirmDialog>
  <SearchDia ref="searchDia"></SearchDia>
</template>

<script setup>
import logo from '@/assets/img/logo.png'
import { Search } from '@element-plus/icons'
import { ref } from 'vue'
import ConfirmDialog from '@/components/client/ConfirmDialog.vue'
import { useRouter } from 'vue-router'
import cl from '@/assets/img/image.png'
import NoticeData from './notice/NoticeData.vue'
import History from './history/HistoryList.vue'
import SearchDia from './SearchDia.vue'

const props = defineProps({
  dataList: {
    type: Object,
    default: null
  },
  noticeList: {
    type: Object,
    required: true,
    default: () => {}
  },
  historyList: {
    type: Array,
    required: true,
    default: () => []
  }
})
const confirmDialog = ref()
const searchDia = ref()

const errorHandler = () => true
const router = useRouter()

const userinfo = props.dataList.userinfo
console.log('userinfo', userinfo)

const isLogin = ref(true)

const search = ref('')
const toUserPage = () => {
  router.push({ name: 'UserPage', params: { userId: userinfo.id } })
}

const toContentManager = () => {
  router.push('/contentManager')
}

const diaItem = ref({
  title: '确定要退出登录吗？',
  content: null
})

let activeIndex = localStorage.getItem('menu')

const handleSelect = (key, keyPath) => {
  console.error(key, keyPath)
  localStorage.setItem('menu', key)
  activeIndex = localStorage.getItem('menu')
  router.push(key)
}

const handlerConfirm = () => {
  localStorage.removeItem('user')
  localStorage.removeItem('token')
  router.push('/ulogin')
}

const logout = () => {
  confirmDialog.value.open(diaItem.value, 0)
}

const searchContent = () => {
  searchDia.value.open()
}

const publish = () => {
  router.push('/publish')
}
</script>

<style scoped>
.menu {
  background: #fff;
  width: 100%;
  height: 50px;
  display: flex;
  line-height: 50px;
  justify-content: space-between;
  border-bottom: 1px #eee solid;
}

.el-menu-demo {
  height: 50px;
  color: #000;
}

.cmenu {
  margin: 0 10px;
}

.avatar:hover {
  cursor: pointer;
}

.right-menu {
  width: 100px;
  text-align: center;
  font-size: 14px;
}

.btn:hover {
  border: none;
  background: none;
}

.right-menu:hover {
  background: #e5f4ff;
  color: #60bdff;
  cursor: pointer;
}

button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 10px;
  color: white;
  text-shadow: 2px 2px rgb(116, 116, 116);
  text-transform: uppercase;
  cursor: pointer;
  border: solid 2px black;
  letter-spacing: 1px;
  font-weight: 600;
  font-size: 17px;
  background-color: hsl(49deg 98% 60%);
  border-radius: 50px;
  position: relative;
  overflow: hidden;
  transition: all 0.5s ease;
}

button:active {
  transform: scale(0.9);
  transition: all 100ms ease;
}

button svg {
  transition: all 0.5s ease;
  z-index: 2;
}

.play {
  transition: all 0.5s ease;
  transition-delay: 300ms;
}

button:hover svg {
  transform: scale(3) translate(50%);
}

.now {
  position: absolute;
  left: 0;
  transform: translateX(-100%);
  transition: all 0.5s ease;
  z-index: 2;
}

button:hover .now {
  transform: translateX(10px);
  transition-delay: 300ms;
}

button:hover .play {
  transform: translateX(200%);
  transition-delay: 300ms;
}
</style>
